<template>
  <el-dialog
    :visible.sync="userTicket.visible"
    :show-close="false"
    width="320px"
    :before-close="onClose"
    custom-class="gift-dialog-wrapper"
  >
    <div class="gift-wrap">
      <i class="gift-wrap__close el-icon-circle-close" @click="onClose"></i>
      <div class="gift-wrap__title">{{ userTicket.newUser == 1 ? '新人专享礼包' : '优惠券' }}</div>
      <el-scrollbar class="gift-wrap__scrollbar" :class="{ active: userTicket.list.length > 4 }">
        <div class="gift-wrap__list">
          <div class="gift-item" v-for="item in userTicket.list" :key="item.id">
            <div
              v-if="item.coupon_type == 1"
              class="mutable"
              :class="{
                font20: item.price.toString().length > 4,
                font16: item.price.toString().length > 6,
                font12: item.price.toString().length > 8
              }"
            >
              {{ item.price | formatMoney }}
            </div>
            <div v-else class="mutable" :class="{ font20: item.discount.toString().length > 4 }">
              {{ item.discount }}折
            </div>
            <div class="content">
              <div v-if="item.coupon_type == 1" class="signal">满{{ item.maxprice }}元可用</div>
              <div v-else class="signal">打折卡</div>
              <div class="parallel" v-if="item.effective_day == 0">永久有效</div>
              <div class="parallel" v-else>有效期{{ item.effective_day }}天</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class="gift-wrap__tip">优惠券已放入“财务中心-我的卡券”列表</div>
      <div class="gift-wrap__btn" @click="onUse">去使用</div>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      userTicket: state => state.user.ticket
    })
  },
  methods: {
    /*关闭弹窗*/
    onClose() {
      this.$store.commit('user/useUserTicketDialog', false)
    },
    // 去使用
    onUse() {
      this.onClose()
      this.$router.push({
        path: `/course`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .gift-dialog-wrapper {
  box-shadow: none;
  background: transparent;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
.gift-dialog-wrapper {
  .gift-wrap {
    background: linear-gradient(180deg, #ff9d30 0%, #ff460c 100%);
    border-radius: 20px;
    padding: 20px 25px 40px;
    position: relative;
    &__close {
      position: absolute;
      right: -24px;
      top: -15px;
      color: #ffffff;
      font-size: 22px;
      cursor: pointer;
    }
    &__title {
      margin-bottom: 20px;
      font-size: 28px;
      color: #ffefd2;
      text-align: center;
      font-weight: bold;
      line-height: 38px;
      text-shadow: 0px 2px 4px rgba(176, 52, 0, 0.33), 0px 1px 3px #ffffff;
    }
    &__list {
      .gift-item {
        height: 71px;
        display: flex;
        align-items: center;
        background-image: url(~@assets/images/public/coupon_bg.png);
        & + .gift-item {
          margin-top: 15px;
        }
        .mutable {
          flex: 0 0 84px;
          font-size: 23px;
          font-weight: bold;
          color: $text-color-price;
          text-align: center;
          &.font20 {
            font-size: 20px;
          }
          &.font16 {
            font-size: 16px;
          }
          &.font12 {
            font-size: 12px;
          }
        }
        .content {
          flex: 1;
          padding: 0 10px;
          .signal {
            font-size: 16px;
            font-weight: 600;
            color: $text-color-import;
            line-height: 22px;
          }
          .parallel {
            margin-top: 5px;
            font-size: 12px;
            font-weight: 400;
            color: $text-color-auxiliary;
            line-height: 17px;
          }
        }
      }
    }
    &__scrollbar {
      padding-bottom: 15px;
      &.active {
        padding-bottom: 0;
        height: 384px;
      }
      ::v-deep .el-scrollbar__wrap {
        overflow-y: auto;
        overflow-x: hidden;
      }
    }
    &__tip {
      font-size: 12px;
      font-weight: 400;
      color: #ffc7b1;
      line-height: 17px;
      text-align: center;
      margin-top: 10px;
    }
    &__btn {
      width: 90px;
      height: 40px;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      background: linear-gradient(180deg, #ffd12d 0%, #ff9d14 100%);
      border-radius: 22px;
      cursor: pointer;
      position: absolute;
      left: 50%;
      margin-left: -45px;
      bottom: -20px;
    }
  }
}
</style>
